import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    id: root
    width: Screen.width > 1000 ? 1200 : 600
    height: Screen.height > 1000 ? 900 : 600
    visible: true
    title: "验证码测试"
    
    // 根据屏幕大小计算缩放因子
    readonly property real scaleFactor: width > 1000 ? 2.0 : 1.5
    
    ColumnLayout {
        anchors.centerIn: parent
        spacing: 20 * scaleFactor
        
        // 标题
        Text {
            Layout.alignment: Qt.AlignHCenter
            text: "字母/数字随机验证码"
            font.pixelSize: 32 * scaleFactor
            font.bold: true
        }
        
        // 验证码组件
        Verification {
            id: verificationWidget
            Layout.alignment: Qt.AlignHCenter
            width: 300 * scaleFactor
            height: 90 * scaleFactor
            
            Component.onCompleted: {
                setBackgroundStyle(1)  // E_DOT - 点状背景
            }
        }
        
        // 提示文字
        Text {
            Layout.alignment: Qt.AlignHCenter
            text: "双击验证码可刷新"
            font.pixelSize: 20 * scaleFactor
            color: "#666666"
        }
        
        // 输入框
        TextField {
            id: inputField
            Layout.preferredWidth: 300 * scaleFactor
            Layout.preferredHeight: 60 * scaleFactor
            Layout.alignment: Qt.AlignHCenter
            placeholderText: "请输入验证码"
            font.pixelSize: 24 * scaleFactor
            selectByMouse: true
            
            // 回车键提交
            Keys.onReturnPressed: {
                checkVerification()
            }
            Keys.onEnterPressed: {
                checkVerification()
            }
        }
        
        // 确认按钮
        Button {
            Layout.preferredWidth: 300 * scaleFactor
            Layout.preferredHeight: 60 * scaleFactor
            Layout.alignment: Qt.AlignHCenter
            text: "确认"
            font.pixelSize: 24 * scaleFactor
            
            onClicked: {
                checkVerification()
            }
        }
        
        // 结果显示标签
        Text {
            id: resultLabel
            Layout.alignment: Qt.AlignHCenter
            font.pixelSize: 24 * scaleFactor
            font.bold: true
        }
    }
    
    // 验证验证码
    function checkVerification() {
        var codes = verificationWidget.getVerificationCode().toUpperCase()
        var inputText = inputField.text.toUpperCase()
        
        if (codes === inputText) {
            resultLabel.text = "验证码输入正确"
            resultLabel.color = "#00AA00"
        } else {
            resultLabel.text = "验证码输入错误"
            resultLabel.color = "#FF0000"
        }
    }
}
